<template>
	<view class="flex-col page " :style="{ 'padding-top': top + 'px' }">


	<view class="flex-col justify-start items-center relative group_top">
	  <image
	    class="image_2_top"
	    src="https://qiniu.ccchongya.com/chongya/images/16947555542884463008.png"
	  />
	  <image
	    class="image_2_top pos_top"
	    src="https://qiniu.ccchongya.com/chongya/images/16947555544083025960.png"
	  />
	  <text class="text_top pos_top_2">全国宠物交易市场</text>
	  <text class="text_top_2 pos_top_3">哪里价格高卖哪里</text>
	</view>







<!-- <view class="flex-row justify-center section relative " style=" z-inde:9999;  margin-top: -132rpx;  padding: 20rpx 0 692rpx;
  background-color: #C4990A;
  border-radius: 20rpx;">
  <text class="font_2 text_3">官方认证专业销售渠道</text>
  <text class="font_2 text_3">第三方担保交易</text>
  <text class="font_2 text_3">有保障</text>
</view> -->
		<view class="flex-col space-y-29 relative"  style=" z-inde:9999;  margin-top: -170rpx;  padding: 30rpx 0 30rpx;
  background-color: #C4990A;
  border-radius: 20rpx;">



				  <view class="flex-row justify-center  " style=" ">
					<text class="font_2 text_3">官方认证专业销售渠道</text>
					<text class="font_2 text_3">第三方担保交易</text>
					<text class="font_2 text_3">有保障</text>
				  </view>

			<view class="flex-col section" >

				<view class="flex-col justify-start section_bg">


			<template>
			<!-- <u-select v-model="showJob" :list="list_job"  @cancel="cancel" @confirm="bindJobChange"></u-select> -->
			</template>
					<view class="flex-col group_7 space-y-17">
						<view class="flex-col group_5 space-y-24">
							<view class="flex-col justify-start relative group_6">
								<view class="divider"></view>
								<view class="flex-col justify-start items-center text-wrapper_4 pos_4">
									<text class="font_1" style="font-weight:bold">您的销售类型</text>
								</view>
							</view>
						</view>
				<view class="flex-row justify-between items-center">
					<view class="font_4">宠物类型</view>
					<view class="flex-row items-center group_11">

							<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
								<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
							</picker>
						<image class="image_4 image_9"
							src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
					</view>
				</view>
				<view class="flex-row justify-between items-center">
					<view class="font_4">育苗情况</view>
					<view class="flex-row items-center group_11">

							<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
								<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
							</picker>
						<image class="image_4 image_9"
							src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
					</view>
				</view>
			<view class="flex-row justify-between items-center">
				<view class="font_4">驱虫情况</view>
				<view class="flex-row items-center group_11">

						<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
							<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
						</picker>
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>
			<view class="flex-row justify-between items-center">
				<view class="font_4">卖家类型</view>
				<view class="flex-row items-center group_11">

						<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
							<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
						</picker>
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>
			<view class="flex-row justify-between items-center">
				<view class="font_4">年龄</view>
				<view class="flex-row items-center group_11">

						<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
							<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
						</picker>
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>
			<view class="flex-row justify-between items-center">
				<view class="font_4">性别</view>
				<view class="flex-row items-center group_11">

						<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
							<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
						</picker>
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>

					<view class="flex-row justify-between items-center">
						<view class="flex-row items-center space-x-6">
							<text class="font_4 text_7">检疫证书</text>
							<image class="shrink-0 image_6"
								src="https://qiniu.ccchongya.com/chongya/images/16947555447816110514.png" />
						</view>
						<view class="flex-row items-center">
							<switch style="transform:scale(0.6)" :checked="formData.jianyiCert == 1"
								@change="jianyiCertChange" />
						</view>
					</view>

						<view class="flex-row justify-between items-center">
							<view class="font_4">宠物性别</view>
							<view class="flex-row items-center group_11">

									<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
										<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
									</picker>
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>

						<view class="flex-row justify-between items-center">
							<text class="font_4">联系人</text>
							<view class="flex-col justify-start items-start flex-auto  input_box" >
								 	<input v-model="formData.contacts" placeholder="请输入联系人">
							</view>
						</view>

						<view class="flex-row justify-between items-center">
							<view class="font_4">宠物性别</view>
							<view class="flex-row items-center group_11">

									<picker @change="bindpetGenderPickerChange" :range="petGenderArray"  :value="index_petGender">
										<text class="font_3 text_10">{{petGenderArray[index_petGender]}}</text>
									</picker>
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>

						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物年龄</text>
							<view class="flex-col justify-start items-start flex-auto  input_box" >
									<input v-model="formData.petage" placeholder="请输入宠物年龄">
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物品种</text>
							<view class="flex-col justify-start items-start flex-auto  input_box" >
									<input v-model="formData.petbreeds" placeholder="请输入宠物品种">
							</view>
						</view>
					<!-- 	<view class="flex-row justify-between items-center">
							<text class="font_4">宠物状态</text>
							<view class="flex-col justify-start items-start flex-auto  input_box" >
									<input v-model="formData.petStatus" placeholder="请输入宠物状态">
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物医疗</text>
							<view class="flex-col justify-start items-start flex-auto  input_box" >
									<input v-model="formData.petMedicine" placeholder="请输入宠物医疗">

							</view>
						</view> -->
						<view class="flex-row justify-between items-center">
							<view class="font_4">宠物医疗</view>
							<view class="flex-row items-center group_11">


									<picker @change="bindpetMedicinePickerChange" :range="petMedicineArray"  :value="index_petMedicine">
										<text class="font_3 text_10">{{petMedicineArray[index_petMedicine]}}</text>
									</picker>


								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="font_4">宠物状态</view>
							<view class="flex-row items-center group_11"  >
										<picker @change="bindpetStatusrPickerChange" :range="petStatusArray"  :value="index_petStatus">
											<text class="font_3 text_10">{{petStatusArray[index_petStatus]}}</text>
										</picker>
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>




			<!-- 			<view class="flex-row justify-between items-center">
							<text class="font_4">宠物数量</text>
							<view class="flex-row items-center space-x-7">
								<view class="section_4"></view>
								<view class="flex-col justify-start items-start text-wrapper_5">
									<input type="text" v-model="formData.number" />
								</view>
								<image class="image_3"
									src="https://qiniu.ccchongya.com/chongya/images/d28565e1bda57e77fb4e372a5fda8f95.png" />
							</view>
						</view> -->


					</view>
				</view>
			</view>

			<view class="flex-col group_12 space-y-16">
				<!-- <view class="flex-col section_7 space-y-16">
					<text class="self-start font_1">品相情况</text>
					<view class="flex-col space-y-11">
						<view class="flex-row space-x-16">
							<view class="flex-col justify-start items-center text-wrapper_7 "
								@click="selectHaulMethod(index)"
								:class="{'text-wrapper_active':formData.haulMethod ==index }"
								v-for="item,index in haulMethodArray">
								<text class="font_6 text_11">{{item}}</text>
							</view>
						</view>
					</view>
				</view> -->



				<view class="flex-col section_8">
					<text class="self-start font_1 text_14">宠物照片</text>
					<view class="flex-row equal-division">
						<view @click="chooseImg('image',0)"
							class="flex-col items-center section_9 equal-division-item space-y-26">
							<block v-if="!images[0]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">宠物照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="images[0]" />
							</block>
						</view>
						<view @click="chooseImg('image',1)"
							class="flex-col items-center section_10 equal-division-item space-y-26">
							<block v-if="!images[1]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">宠物照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="images[1]" />
							</block>
						</view>
						<view @click="chooseImg('image',2)"
							class="flex-col items-center section_10 equal-division-item space-y-26">
							<block v-if="!images[2]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">宠物照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="images[2]" />
							</block>
						</view>
					</view>
				</view>

				<view class="flex-col section_13 space-y-14">
					<text class="self-start font_1">备注留言</text>
					<view class="flex-col justify-start items-start text-wrapper_9">
						<textarea v-model="formData.content" class="font_4 text_16" placeholder="请输入备注内容"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col group_13 space-y-24">
			<view class="flex-row items-center group_14 space-x-8">
				<view class="shrink-0 section_14" @click="agreeChange">
					<span :class="{'select':agree}"></span>
				</view>
				<view class="group_15">
					<text class="font_6 text_17">我已阅读并同意</text>
					<text class="font_4 text_18">《宠物协议条款》</text>
				</view>
			</view>
			<view class="flex-col justify-start items-center relative group_16">
				<view class="section_15"></view>
				<view class="flex-col justify-start items-center text-wrapper_10 pos_5">
					<text class="text_19" @click="quote">提交信息</text>
				</view>
			</view>
		</view>

		<u-popup :show="showPetCate" mode="bottom" @close="showPetCate=false">
					<view>
						<view class="topPop">
							<view class="topPop1">
								<view >兴趣爱好</view><!-- 图片未切 -->
								<image class="img2"  src="https://ishowbp.oss-cn-hangzhou.aliyuncs.com/assets/static/imgs/circle/close.png" @click="showPetCate=false"></image>
							</view>
						</view>
						<view class="classifyBigBox">
		<!-- 			.item0 h6 span{background-color:#FF87BC;}
					.item0{background-color:#FF87BC;color:#ffffff} -->
		<!-- :style="{ background: item.background, color: item.color }" -->
		<!-- :style="colorData[index]" -->
							<view class="oneClassify flex item" :style="item.background" :class="[{selectActive:selected[item.id]==true},'item']" :key="index" v-for="(item,index) in petcatArray"
								@click="onSelectClassify(item.id)">
								{{item.title}}
							</view>
						</view>
						<view class="tl-flex-center1" style="display:flex;padding:10px;">
							<view @click="onClear" class="tl-btn-120" style="flex:1">重置</view>
							<view @click="onConfirmFiltrate" class="onConfirmFiltrate" style="flex:1;		background-image: linear-gradient(0deg, #ffbd52 100% ,#f5f7f7 0%);">确定</view>
						</view>

					</view>
					</u-popup>



		<u-popup :show="show_pop" type="bottom" :custom="true" :mask-click="false" class="ppppppppppp">
		  <view class="pop">
		    <view class="btns">
		      <view class="pop-button cancel" @click="cancel()">取消</view>
		      <view class="pop-button sure" @click="sure()">确定</view>
		    </view>
		    <view class="pop-content">
		      <view class="content">
		        <scroll-view scroll-y class="left-aside">
		          <view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
		            {{ item.name }}
		          </view>
		        </scroll-view>
		        <scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="scrollTop">
		          <view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
		            <view class="s-item">
		              <m-icon class="icon" type="double-left-angle" color="#F1F1F1" size="8"></m-icon>
		              {{ item.name }}
		              <m-icon class="icon" type="double-right-angle" color="#F1F1F1" size="8"></m-icon>
		            </view>
		            <view class="t-list">
		              <view
		                :class="{ active: vSelect.indexOf(titem.id) != -1 }"
		                @click="tapInfo(titem.id)"
		                class="t-item"
		                v-for="titem in item.child"
		                :key="titem.id"
		              >
		                <text>{{ titem.name }}</text>
		              </view>
		            </view>
		          </view>
		        </scroll-view>
		      </view>
		    </view>
		  </view>
		</u-popup>



	</view>
</template>

<script>

	const API = require('@/utils/api/common.js').default;
	const $ = require('@/utils/api.js');
	export default {
		components: {},
		props: {},
		data() {
			return {
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				isLogin: uni.getStorageSync('token') ? true : false,
				index:0,
				petcats:'',
				showPetCate: false,
				selected: {}, //选取的分类 ,用对象更方便存取数据
				selected_ids: {},
				selected_titles:'',
				petcatArray:[
					{
						id:1,
						title:'狗'
					},
					{
						id:2,
						title:'狗'
					},
					{
						id:3,
						title:'鼠'
					},
					{
						id:4,
						title:'龟'
					},
					{
						id:5,
						title:'鱼'
					},
					{
						id:6,
						title:'马'
					},
					{
						id:7,
						title:'其他'
					}
				],


				show_pop:false,
				isflag: true,
				agree: false,


				index_petGender:0,
				index_petMedicine:0,
				index_petStatus:0,
				petGenderArray: ["请选择", "公","母", '其他'],
				petMedicineArray: ["请选择", "节育", '未节育'],
				petStatusArray:["请选择", "健康", '有点弱'],

				showJob: false,
				list_job:[
						{
							value: '',
							label: '不限'
						},
					{
					 	value: '11.23-12.21',
					 	label: '机关事业单位'
					 }, {
					 	value: '11.23-12.21',
					 	label: '教育系统'
					 }, {
					 	value: '11.23-12.21',
					 	label: '卫健系统'
					 }, {
					 	value: '11.23-12.21',
					 	label: '国企央企'
					 }, {
					 	value: '11.23-12.21',
					 	label: '科研院所'
					 },
					{
						value: '11.23-12.21',
						label: '重点民企'
					},
					{
						value: '11.23-12.21',
						label: '律师'
					},
					{
						value: '11.23-12.21',
						label: '会计师'
					},
					{
						value: '11.23-12.21',
						label: '创业'
					},
					{
						value: '11.23-12.21',
						label: '自由职业'
					},
					{
						value: '11.23-12.21',
						label: '其他'
					},
				],


				petVolumeArray: ["小型", "中型", "大型", "都有"],
				petTypeArray: ["小狗", "小猫"],
				cageSizeArray: ["1平方", "0.5平方"],
				shuttleArray: ["上门接送", '约定地点'],
				haulMethodArray: ["宠物快车", "宠物空运", "铁路托运", "城市专线", "空调专车", "宠物客运"],
				addServiceMethodArray:['上门接宠','送宠到家','提供笼具'],
				tasteList :[1,2,3,4,5],

				formData: {
					jianyiCert: 0,
					petGender: "",
					petage: "",
					petMedicine: "",
					petStatus: "",
					petGender: "",
					contacts: "",
					mobile: "",
					address: "",
					cover:'',
					images:'',

					// shuttle: 0,
					// number: 1,
					// jianyiCert: 1,
					// insureStatus: 1,
					// urgentStatus: 1,
					// locateStatus: 1,
					// petType: 0,
					// petVolume: 0,
					// // expectedTime: "2023-09-29 00:00:00",
					// image: ",,,",
					// images: ",,,",
					// haulMethod:0,
					// addServiceMethod:0,
				},
				addressType: '',
				tyAddressTo: {},
				tyAddressFrom: {},



				flist: [

				],
				slist: [

				],
				slistTmp: [

				],
					  currentId:0,
					  scrollTop: 0,
					     			oldScrollTop: 0,
									vSelect:[],

			};
		},
		computed: {
			i18n() {
				return this.$t('advice')
			},
			images() {
				if (this.formData.images) {
					let arr = this.formData.images.split(",")
					if (arr.length == 1) {
						arr.push("");
						arr.push("");
					}
					if (arr.length == 2) {
						arr.push("");
					}
					return arr;
				}
				return ["", "", ""]
			}
		},
		mounted() {
			this.tyAddressFrom = uni.getStorageSync('tyAddressFrom');
			this.tyAddressTo = uni.getStorageSync('tyAddressTo');
		},
		onLoad(options) {

			this.initData(options);
		},
		methods: {
			jianyiCertChange(v) {
				if (v.detail.value) {
					this.formData.jianyiCert = 1
				} else {
					this.formData.jianyiCert = 0
				}
			},
			 getKeyByValue(obj, value) {
			  for (let key in obj) {
			    if (obj[key] === value) {
			      return key;
			    }
			  }
			  return null; // 如果没有找到匹配的键，则返回null
			},
			// 数据初始化
			async initData(options) {
				// let title = '新增收货地址';
				// if (options.type === 'edit') {
				// 	title = '编辑收货地址';
				if(options.id){


					await this.getDetail(options.id);
				}
				// } else {
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 	}, 1 * 1000);
				// }
				// this.manageType = options.type;
				// uni.setNavigationBarTitle({
				// 	title
				// });
			},
			// 获取收货地址
			async getDetail(id) {

					console.log(id)
				await this.$http
					.get(`${API.assistDetail}/`+id, {})
					.then(async r => {
						this.formData = await r.data;
						this.loading = false;

						// {{petStatusArray[index_petStatus]}}



						// this.formData.petGender = this.petGenderArray[e.detail.value]
						// },
						// bindpetMedicinePickerChange: function(e) {
						// 	this.index_petMedicine = e.detail.value
						// 	this.formData.petMedicine = this.petMedicineArray[e.detail.value]
						// },
						// bindpetStatusrPickerChange: function(e) {
						// 	this.index_petStatus = e.detail.value
						// 	this.formData.petStatus = this.petStatusArray[e.detail.value]

						this.index_petStatus = this.getKeyByValue(this.petStatusArray,this.formData.petStatus)
						this.index_petMedicine = this.getKeyByValue(this.petMedicineArray,this.formData.petMedicine)
						this.index_petGender = this.getKeyByValue(this.petGenderArray,this.formData.petGender)


						// this.petStatusArra.forEach(e =>{
						// 	if(id==e.id){
						// 		if(this.selected[id]){
						// 			 // e.background=		this.rgbColor()
						// 			  e.background=		"#ffbd52”"

						// 		}else{
						// 			 e.background=		"#f1f1f1"
						// 		}
						// 	}

						// })




						// <picker @change="bindpetStatusrPickerChange" :range="petStatusArray"  :value="index_petStatus">
						// 	<text class="font_3 text_10">{{petStatusArray[index_petStatus]}}</text>


					})
					.catch(() => {
						this.loading = false;
					});
			},
			cancel(e){
			    console.log('cancel，携带值为', e)
			},

			bindJobChange: function(e) {
				console.log('select发送选择改变，携带值为', e)
				let value = e;
				this.userinfo.job = value[0]['label'];
			},


			// start0
			// 获取用户信息
			 getPetCates() {
				this.loading = true;
			  	 this.$http
					.get(tags, {
					})
					.then(r => {
						this.tags = r.data;
						console.log("tags",this.tags);

						// this.dataList = this.dataList.concat(res.rows)
						// let list = []
						// this.tags.forEach(e =>{
						// 	this.rgbColor()
						// 	// console.log("rgbColor")
						// 	e.background=		this.rgbColor()
						// })

						this.loading = false;
					 this.havetags()
					})
					.catch(() => {
						this.loading = false;
					});
			},
			//选取分类
			    onSelectClassify(id) {
			      this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
						this.petcatArray.forEach(e =>{
							if(id==e.id){
								if(this.selected[id]){
									 // e.background=		this.rgbColor()
									  e.background=		"#ffbd52”"

								}else{
									 e.background=		"#f1f1f1"
								}
							}

						})
			    },

					rgbColor() {
							let r = Math.floor(Math.random() * 256);
							let g = Math.floor(Math.random() * 256);
							let b = Math.floor(Math.random() * 256);
							let rgb = `rgb(${r},${g},${b})`;
							return "background:#ffbd52"
			    },
			//重置
			onClear() {
			  // this.selected = {}

				let  that = this
				let select = [] //选择的筛选结果数组
				let select_ids = []
				let select_titles = []
				this.tags.forEach(e =>{
															console.log(e.id)
															if('that.tags[i].id',that.haveTags.includes(e.id)){
																 e.background=		that.rgbColor()
																	that.$set(that.selected, e.id, true) //动态更新视图数据
																	select.push(e)
																	select_ids.push(e.id)
																	select_titles.push(e.title)
															}else{
																	e.background=		"#f1f1f1"
																	that.$set(that.selected, e.id, false) //动态更新视图数据
															}
				})

				that.selected_ids = select_ids
				that.selected_titles =select_titles


				this.selected_ids=  this.selected_ids.join(',')
				this.petcats =  this.selected_titles.join(',')



				this.showPetCate = false;

			},
			//提交筛选
			onConfirmFiltrate() {
			  let select = [] //选择的筛选结果数组
				  let select_ids = []
					  let select_titles = []
			  const {
			    petcatArray,
			    selected,
					selected_ids,
					selected_titles
			  } = this




			  //Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
			  Object.keys(selected).forEach(key => {
			    if (selected[key]) {
			      for (let i = 0; i < petcatArray.length; i += 1) {
			        petcatArray[i].id == key ? select.push(petcatArray[i]) : ''
							petcatArray[i].id == key ? select_ids.push(petcatArray[i].id) : ''
							petcatArray[i].id == key ? select_titles.push(petcatArray[i].title) : ''
			      }

			    }

			  })
			  console.log(select ,"选择结果数组-----");
				this.selected_ids = select_ids
				this.selected_titles =select_titles



			  this.selected_ids=  this.selected_ids.join(',')
				this.petcats =  this.selected_titles.join(',')
				this.showPetCate = false

						this.formData.petType = this.selected_ids
						console.log('this.petcats' ,this.petcats )


			},


			// ?start1
			tabtap(item) {
			    if (!this.sizeCalcState) {
			      this.calcSize();
			    }
			    this.currentId = item.id;
			    let list = [];
			    this.slistTmp.map(sitem => {
			      if (sitem.pid === item.id) {
			        list.push(sitem);
			      }
			    });
			    this.slist = list;
			  },
			  //计算右侧栏每个tab的高度等信息
			  calcSize() {
			    let h = 0;
			    this.slist.forEach(item => {
			      let view = uni.createSelectorQuery().select('#main-' + item.id);
			      view.fields(
			        {
			          size: true
			        },
			        data => {
			          item.top = h;
			          h += data.height;
			          item.bottom = h;
			        }
			      ).exec();
			    });
			    this.sizeCalcState = true;
			  },
			  tapInfo(e) {
			    if (this.vSelect.indexOf(e) == -1) {
			      this.vSelect.push(e);
			    }
			  },














			agreeChange() {
				this.agree = !this.agree
			},
			chooseImg(type, i) {
				const self = this;
				$.uploadimg({
					success(res) {
						console.log("res.imgUrl", res.imgUrl)
						if (type == 'image') {
							let str = self.formData.images
							let arr = str.split(",")
							arr[i] = res.imgUrl;
							str = arr.join(",")
							console.log(str);
							self.$set(self.formData, "images", str)
						} else {
							let str = self.formData.images
							let arr = str.split(",")
							arr[i] = res.imgUrl;
							str = arr.join(",")
							self.$set(self.formData, "images", str)
						}
					}
				})
			},
			selectHaulMethod(index) {
				this.formData.haulMethod = index
			},
			selectAddServiceMethod(index) {
				this.formData.addServiceMethod = index

			},
			expectedTimechange(newval) {
				console.log('范围选:', this.datetimerange);
			},
			locateStatusChange(v) {
				if (v.detail.value) {
					this.formData.locateStatus = 1
				} else {
					this.formData.locateStatus = 0
				}
			},
			urgentStatusChange(v) {
				if (v.detail.value) {
					this.formData.urgentStatus = 1
				} else {
					this.formData.urgentStatus = 0
				}
			},
			insureStatusChange(v) {
				if (v.detail.value) {
					this.formData.insureStatus = 1
				} else {
					this.formData.insureStatus = 0
				}
			},
			jianyiCertChange(v) {
				if (v.detail.value) {
					this.formData.jianyiCert = 1
				} else {
					this.formData.jianyiCert = 0
				}
			},
			bindCageSizePickerChange: function(e) {
				this.formData.cageSize = e.detail.value
			},
			bindShuttlePickerChange: function(e) {
				this.formData.shuttle = e.detail.value
			},
			bindPetTypePickerChange: function(e) {
				this.formData.petType = e.detail.value
			},
			bindPetVolumePickerChange: function(e) {
				this.formData.petVolume = e.detail.value
			},


		bindpetGenderPickerChange: function(e) {
			this.index_petGender = e.detail.value
			this.formData.petGender = this.petGenderArray[e.detail.value]
		},
		bindpetMedicinePickerChange: function(e) {
			this.index_petMedicine = e.detail.value
			this.formData.petMedicine = this.petMedicineArray[e.detail.value]
		},
		bindpetStatusrPickerChange: function(e) {
			this.index_petStatus = e.detail.value
			this.formData.petStatus = this.petStatusArray[e.detail.value]
		},



			quote() {
				const self = this;
				// let postData = {
				// 	addFormJson: JSON.stringify(this.formData),
				// 	addressToJson: JSON.stringify(this.tyAddressTo),
				// 	addressFromJson:JSON.stringify(this.tyAddressFrom)
				// }
				if (!this.agree) {
					$.$toast("请勾选契约条款");
					return
				}
				if (!this.isflag) {
					return
				}
				// this.isflag = false;
				 this.formData.type=2;
				$.ajax({
					url: API.addAssistApi,
					data: this.formData,
					method: 'POST',
					loading: true,
					loadingText: "提交中" + ['…'],
					success(res) {
						console.log("res",res)
						let info = res.data;
						// self.go('/pages/ys/order/quote?orderNo=' + info.orderNo);
						self.go('/pages/other/adopt/index');
					},
					complete() {
						this.isflag = true;
					}
				})
			},
		},
	};
</script>

<style scoped lang="css">




	.page {
	  background-image: linear-gradient(180deg, #ffc300 6.5%, #ffffff 25.8%);
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	}


	.group_top {
	 position: relative;
	}
	.image {
	  width: 750rpx;
	  height: 342rpx;
	}
	.image_2_top {
	  opacity: 0.77;
	  width: 750rpx;
	  height: 430rpx;
	}
	.pos_top {
	 position: absolute;
	  left: 0;
	  right: 0;
	  top: 3px;
	  bottom: 0;
	}
	.font_1_top {
	  font-size: 28rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 26rpx;
	  color: #000000a6;
	}
	.text_top {
	  color: #ffffff;
	}
	.pos_top_2 {
	  position: absolute;
	  /* right: 246rpx;
	   */
	  top: 91rpx;
	  width:100%;
	  text-align:center;
	}
	.text_top_2 {
	  color: #ffffff;
	  font-size: 54rpx;
	  font-family: HarmonyOSSansSC;
	  font-weight: 700;
	  line-height: 51rpx;
	}
	.pos_top_3 {
	  position: absolute;
	  width:100%;
	  text-align:center;
	  /* right: 142rpx; */
	  top: 141rpx;
	}



	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.space-y-29 .section {
		padding: 0 32rpx;
		/* padding-top: 56rpx; */
	}

	.section {
		/* background-image: linear-gradient(0deg, #f5f7f7 0%, #ffbd52 100%); */
		/* height: 696rpx; */
	}

	.section_bg {
		/* background-color: #fff; */

		border-radius: 16rpx;
		padding-bottom: 32rpx;

	}

	.section_2 {}

	.group {}

	.group_2 {
		height: 80rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.section_3 {
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx #f0f0f040;
		width: 100rpx;
		height: 88rpx;
		position: absolute;
		left: 0;
		top: -8px;
		z-index: 9999;
		border-radius: 16rpx;
	}

	.text-wrapper {
		padding: 28rpx 0;
		/* background-color: #ffffff; */
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.pos_8 {
		/* border :1px solid #ff0000; */
		/* height:100r/px; */

	/* 	padding-top: 40rpx;
		 margin-top: -40rpx; */

		 background-color: transparent;
		 background-image:url('https://qiniu.ccchongya.com/chongya/images/16947555445745866370.png');
		 background-size:cover


		/* background-image:url('https://qiniu.ccchongya.com/chongya/images/16947555446803444236.png'); */

	}

	.pos_8 .text {
		/* float: right; */
		/* margin-left: 136rpx; */
		font-weight: 700;
	}

	.pos_2 {
		position: absolute;
		right: 0;

	}

	.font_1 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #081329;
	}

	.pos_2 .text {
		margin-right: 136rpx;
		color: #000000;
		font-weight: 700;
	}

	.image {
		filter: drop-shadow(0px 4rpx 10rpx #0000001c);
		width: 362rpx;
		height: 94rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: -16rpx;
	}

	.image_2 {
		width: 26rpx;
		height: 12rpx;
	}

	.pos_3 {
		position: absolute;
		right: 324rpx;
		bottom: 0;
	}

	.group_3 {
		background-color: #ffffff;
		padding: 66rpx 32rpx 0;
		margin-top:-1px
	}

	.group_4 {
		padding: 0 4rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.text-wrapper_2 {
		padding: 8rpx 0;
		background-color: #4578ff;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #ffffff;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #666e7a;
	}

	.view {
		margin-top: 64rpx;
	}

	.text-wrapper_3 {
		padding: 8rpx 0;
		background-color: #43cf7c;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.text_2 {
		color: #081329;
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		line-height: 30rpx;
	}

	.group_5 {
		margin-top: 40rpx;
		padding: 0 4rpx 5rpx;
	}

	.group_6 {
		padding: 36rpx 0 24rpx;
	}

	.divider {
		margin: 0 28rpx;
		background-color: #00000017;
		height: 1rpx;
	}

	.text-wrapper_4 {
		padding: 20rpx 0 12rpx;
		background-color: #ffffff;
		width: 263rpx;
	}

	.pos_4 {
		position: absolute;
		left: 50%;
		top: 0;

		transform: translateX(-50%);
	}

	.font_4 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #081329;
		min-width:120rpx;
		flex-shrink: 0;
		text-align:left;
		/* text-align: justify; */
		/* text-align-last: justify; */

	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 14rpx;
	}

	.section_4 {
		background-color: #078dff;
		width: 18rpx;
		height: 2rpx;
	}

	.text-wrapper_5 {
		padding: 0 8rpx;
		background-color: #f8f8f8;
		border-radius: 4rpx;
		width: 73rpx;
		height: 39rpx;
		font-size: 13rpx;
	}

	.text_3 {
		margin-left: 16rpx;
		line-height: 18rpx;
	}

	.image_3 {
		width: 18rpx;
		height: 18rpx;
	}

	.group_7 {
		background-color: #ffffff;
		padding: 20rpx 32rpx;
		border-radius: 20rpx;
	}

	.space-y-17>view:not(:first-child),
	.space-y-17>text:not(:first-child),
	.space-y-17>image:not(:first-child) {
		margin-top: 34rpx;
	}

	.group_8 {
		width: 75rpx;
	}

	.image_4 {
		width: 32rpx;
		height: 32rpx;
	}

	.image_5 {
		margin-left: 44rpx;
	}

	.text_4 {
		margin-left: -76rpx;
	}

	.text_5 {
		line-height: 21rpx;
	}

	.section_5 {
		padding-left: 12rpx;
		background-color: #1890ff;
		height: 34rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #ffffff;
	}

	.text_6 {
		font-size: 18rpx;
		line-height: 17rpx;
	}

	.section_6 {
		background-color: #ffffff;
		border-radius: 50%;
		width: 27rpx;
		height: 27rpx;
	}

	.space-x-4>view:not(:first-child),
	.space-x-4>text:not(:first-child),
	.space-x-4>image:not(:first-child) {
		margin-left: 8rpx;
	}

	.image_6 {
		width: 24rpx;
		height: 24rpx;
	}

	.text_7 {
		line-height: 23rpx;
	}

	.group_9 {
		margin: 4rpx 0;
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 40rpx;
	}

	.button {
		flex: 1;
	}

	.group_10 {
		padding-left: 20rpx;
	}

	.image_7 {
		margin-left: 124rpx;
	}

	.text_8 {
		margin-left: -156rpx;
	}

	.image_8 {
		margin-left: 144rpx;
	}

	.text_9 {
		margin-left: -176rpx;
	}

	.group_11 {
		/* width: 127rpx; */
	}

	.image_9 {
		/* margin-left: 96rpx; */
		display: inline-block;
		vertical-align: middle;
	}

	.text_10 {
		/* margin-left: -128rpx; */
	}

	.group_12 {
		padding: 0 26rpx;
	}

	.section_7 {
		padding: 24rpx 32rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.space-y-11>view:not(:first-child),
	.space-y-11>text:not(:first-child),
	.space-y-11>image:not(:first-child) {
		margin-top: 22rpx;
	}

	.space-x-16 {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.space-x-16>view {
		margin-right: 32rpx;
		margin-bottom: 32rpx;
	}

	.text-wrapper_7 {
		padding: 16rpx;
		background-color: #ededed;
		border-radius: 40rpx;
		height: 54rpx;
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #000000;
	}



	.text-wrapper_active {
		background-color: #ffbd52;
		color: #fff;

	}

	.text-wrapper_active .font_6 {}

	/* .text_11 {
		color: #ffffff;
	} */





	.text_12 {
		line-height: 23rpx;
	}

	.space-x-15>view:not(:first-child),
	.space-x-15>text:not(:first-child),
	.space-x-15>image:not(:first-child) {
		margin-left: 30rpx;
	}

	.text-wrapper_8 {
		padding: 16rpx 0;
		background-color: #ededed;
		border-radius: 40rpx;
		width: 136rpx;
		height: 54rpx;
	}

	.text_13 {
		line-height: 23rpx;
	}

	.section_8 {
		padding: 32rpx 26rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.text_14 {
		margin-left: 8rpx;
	}

	.equal-division {
		margin-top: 28rpx;
	}

	.section_9 {
		flex: 1 1 208rpx;
	}

	.image_10 {
		width: 16rpx;
		height: 16rpx;
		margin-top: 56rpx;
	}

	.font_7 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #000000a6;
	}

	.section_10 {
		flex: 1 1 208rpx;
		margin-left: 8rpx;
	}

	.section_11 {
		padding: 32rpx 20rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.text_15 {
		margin-left: 12rpx;
	}

	.section_12 {
		flex: 1 1 208rpx;
		margin-left: 16rpx;
	}

	.equal-division-item {
		/* padding: 56rpx 0; */
		background-color: #0000000a;
		border-radius: 20rpx;
		height: 208rpx;
		overflow: hidden;
	}

	.space-y-26>view:not(:first-child),
	.space-y-26>text:not(:first-child),
	.space-y-26>image:not(:first-child) {
		margin-top: 52rpx;
	}

	.section_13 {
		padding: 32rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.space-y-14>view:not(:first-child),
	.space-y-14>text:not(:first-child),
	.space-y-14>image:not(:first-child) {
		margin-top: 28rpx;
	}

	.text-wrapper_9 {
		padding: 28rpx 0 164rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
	}

	.text_16 {
		margin-left: 28rpx;
		color: #808080;
		line-height: 23rpx;
		height: auto;
	}

	.group_13 {
		margin: 62rpx 0;
		padding: 0 112rpx;
	}

	.space-y-24>view:not(:first-child),
	.space-y-24>text:not(:first-child),
	.space-y-24>image:not(:first-child) {
		margin-top: 48rpx;
	}

	.group_14 {
		padding: 0 32rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.section_14 {
		background-color: #ffffff;
		border-radius: 16rpx;
		width: 32rpx;
		height: 32rpx;
		border: solid 2rpx #ffc300;
	}

	.section_14 .select {
		width: 20rpx;
		height: 20rpx;
		border-radius: 11rpx;
		background-color: #ffc300;
		display: block;
		margin-top: 4rpx;
		margin-left: 4rpx;
	}

	.group_15 {
		line-height: 23rpx;
		height: 23rpx;
	}

	.text_17 {
		line-height: 23rpx;
	}

	.text_18 {
		color: #ffbd52;
		line-height: 23rpx;
	}

	.group_16 {
		padding-top: 80rpx;
	}

	.section_15 {
		background-color: #f7cd1c;
		border-radius: 232rpx;
		filter: blur(16rpx);
		width: 359rpx;
		height: 20rpx;
	}

	.text-wrapper_10 {
		padding: 32rpx 0 36rpx;
		background-color: #ffbd52;
		border-radius: 100rpx;
	}

	.pos_5 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.text_19 {
		color: #00000082;
		font-size: 36rpx;
		font-family: HarmonyOSSansSC;
		line-height: 33rpx;
	}


	.equal-division_2 {
		margin-top: 72rpx;
	}

	.section_16 {
		padding: 24rpx 0;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_17 {
		flex: 1 1 150rpx;
	}

	.equal-division-item_2 {
		padding: 12rpx 0;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.image_11 {
		width: 208rpx;
		height: 208rpx;
	}

	.font_8 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_20 {
		color: #ffbd52;
	}
</style>

<style scoped lang="css">
.pop {
  background: #fff;
  border-radius: 40rpx 40rpx 0  0;
  .btns {
    display: flex;
    justify-content: space-between;
    padding-top: 4upx;
    .pop-button {
      padding: 15px;
    }
  }
  .item-box {
    padding: 10px;
    .item {
      display: inline-block;
      border: 1px solid #1550b5;
      color: #1550b5;
      border-radius: 12px;
      padding: 2px 10px;
      margin-right: 10px;
      &.cur {
        color: #fff;
        border: 1px solid #1550b5;
        background-color: #1550b5;
      }
    }
  }
  .pop-content {
    height: 100%;
    background-color: #fafafa;
    display: flex;
    height: 800upx;
    margin: 0 -20upx;
    .content {
      display: flex;
    }

    .left-aside {
      flex-shrink: 0;
      width: 240upx;
      height: 100%;
      background-color: #f7f7f7;
    }
    .f-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100upx;
      font-size: 28upx;
      color: #757575;
      position: relative;
      &.active {

        color: #1550b5;
        background: #f7f7f7;
        font-size: 36upx;
        font-weight: bold;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 34upx;
          width: 8upx;
          background-color: #1550b5;
          border-radius: 0 4upx 4upx 0;
        }
      }
    }

    .right-aside {
      flex: 1;
      overflow: hidden;
      padding: 16upx 32upx 0 20upx;
      /deep/ .uni-scroll-view {
        height: 450px;
        overflow-y: auto;
      }
    }
    .s-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70upx;
      padding-top: 8upx;
      font-size: 28upx;
      color: #757575;
      background: #fff;
      .icon {
        margin: 0 16upx;
        transform: scale(0.5);
      }
    }
    .t-list {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      padding: 12upx 6upx 0 6upx;
      margin-bottom: 24upx;
      &:after {
        content: '';
        flex: 99;
        height: 0;
      }
      .t-item {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-width: 200upx;
        font-size: 28upx;
        color: #666;
        margin: 0 10upx 40upx 10upx;
		padding:5px 0;
        &.active {

          color: #fff;
          background-color: #1550b5;
          border-radius: 24upx;
        }
      }
    }
  }
}





















</style>
<style>
	.topPop {
			padding: 30upx;
			height:100%;
					// position: relative;

		// display: flex;
									// align-items: flex-end;
			.topPop1 {
				// position: absolute;
				// bottom: 0;
				display: flex;
	// vertical-align: bottom;
				.img2 {
					width: 50upx;
					height: 50rpx;
					position:absolute;
					top:30rpx;
					right:30rpx;

				}

				.img1 {
					width:300rpx;
					// flex: 1;
				}
			}
		}

  .classifyBigBox {
    margin: 47rpx 20rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10rpx;
  }

  .oneClassify {
    display: flex;
    align-items: center;
    padding: 10rpx;
		margin-bottom:10px;

    justify-content: center;
    background: #f1f1f1;
    border-radius: 30rpx;
    color: #666;
    border: 2rpx solid #dedede;
  }

  .selectActive {
    background: rgb(255, 189, 82);
    color: #FFFFFF;
  }

	.item0{background-color:#FF87BC;color:#ffffff}
	.item1{background-color:#E97D39;color:#ffffff}
	.item2{background-color:green;color:#ffffff}
	.item3{background-color:darkorchid;color:#ffffff}
	.item4{background-color:brown;color:#ffffff}
	.item5{background-color:#FF87BC;color:#ffffff}
	.item6{background-color:#E97D39;color:#ffffff}
	.item7{background-color:green;color:#ffffff}
	.item8{background-color:darkorchid;color:#ffffff}
	.item9{background-color:brown;color:#ffffff}
	.item10{background-color:#FF87BC;color:#ffffff}
	.item11{background-color:#E97D39;color:#ffffff}
	.item12{background-color:green;color:#ffffff}
	.item13{background-color:darkorchid;color:#ffffff}
	.item14{background-color:brown;color:#ffffff}
	.item15{background-color:#FF87BC;color:#ffffff}
	.item16{background-color:#E97D39;color:#ffffff}
	.item17{background-color:green;color:#ffffff}
	.item18{background-color:darkorchid;color:#ffffff}
	.item19{background-color:brown;color:#ffffff}
	.item20{background-color:#FF87BC;color:#ffffff}
	.item21{background-color:#E97D39;color:#ffffff}
	.item22{background-color:green;color:#ffffff}
	.item23{background-color:darkorchid;color:#ffffff}
	.item24{background-color:brown;color:#ffffff}
	.item25{background-color:#FF87BC;color:#ffffff}
	.item26{background-color:#E97D39;color:#ffffff}
	.item27{background-color:green;color:#ffffff}
	.item28{background-color:darkorchid;color:#ffffff}
	.item29{background-color:brown;color:#ffffff}
	.item30{background-color:#FF87BC;color:#ffffff}



  .tl-btn-120{
    width: 180rpx;
    padding: 17rpx;
    background: F7F7F7;
    color: #999;
    border-radius: 13rpx;
    border: 2rpx solid #dedede;
    text-align: center;
  }
  .onConfirmFiltrate{
    width: 180rpx;
    padding: 17rpx;
    background: #2851F3;
    color: #FFFFFF;
    border-radius: 13rpx;
    text-align: center;
    margin-left: 20rpx;
  }


 .input_box {
	 margin-left:40rpx;
      padding: 8px 20rpx 12px;
      background-color: #cccccc29;
      border-radius: 2px;
      height: 33px;
      border: solid 0.5px #d9d9d9;
  }

  .input_box  input{
	  text-align:right;
   width:100%;height:100%
   }
</style>
